<template>
  <el-form-item
    class="edit-form-item"
    :label-width="labelWidth"
    :required="config.required"
    :for="'null'"
    :prop="formItemId"
    :show-message="false"
  >
    <template #label>
      <div>
        <el-icon
          v-if="currentItem.config.hideType"
          size="18"
          class="hidden-item-icon"
        >
          <i class="iconfont icon-eye-close" />
        </el-icon>
        <div
          v-if="config.showLabel"
          class="title-wrap"
        >
          <!--          <span-->
          <!--            v-if="index !== undefined && index !== null"-->
          <!--            class="seq-num"-->
          <!--          >-->
          <!--            {{ index + 1 }}-->
          <!--          </span>-->
          <form-tinymce
            class="label-wrap"
            :id="labelTinymceId"
            v-model:value="config.label"
            :inline="true"
            :toolbar="formTitleToolbar"
            :form-item-id="formItemId"
            @click="
              event => {
                event.preventDefault(); // 阻止 label 元素的默认行为
              }
            "
          />
        </div>
        <span
          v-if="currentItem.examConfig && currentItem.examConfig.score && currentItem.examConfig.enableScore"
          class="text-after"
          @click="
            event => {
              event.preventDefault(); // 阻止 label 元素的默认行为
            }
          "
        >
          ({{ $t("formgen.formItem.max") }}:{{ currentItem.examConfig.score }} {{ $t("formgen.formItem.text") }})
          <span
            v-if="currentItem.examConfig.answer && currentItem.examConfig.scoringType !== 4"
            class="answer-text"
          >
            {{ $t("formgen.formItem.answer") }}：{{ getExamAnswer }}
          </span>
        </span>
        <div
          v-if="currentItem.description && currentItem.titleDesc"
          class="form-item-description"
        >
          <div v-html="currentItem.description"></div>
        </div>
      </div>
    </template>
    <template #default>
      <div
        class="form-content"
        :class="[clickComponentList.includes(currentItem.typeId) ? '' : 'not-click-component']"
      >
        <!--     特殊处理组件 会对值进行包装等操作-->
        <template v-if="componentList.includes(currentItem.typeId)">
          <component
            :is="formItemComponent"
            v-model:value="currentItem.config.defaultValue"
            :item="currentItem"
            :mode="'design'"
            class="form-item-component"
            @input="handleDefaultValue"
          />
        </template>
        <template v-else>
          <!--    其他无特殊处理组件-->
          <component
            v-bind="{ ...currentItem }"
            :is="formItemComponent"
            v-model:value="currentItem.config.defaultValue"
            class="form-item-component"
            :mode="'design'"
            @input="handleDefaultValue"
          />
        </template>
      </div>
    </template>
  </el-form-item>
</template>

<script setup name="FormItem">
import { computed, defineEmits, defineProps, ref } from "vue";
import FormTinymce from "../../tinymce/index.vue";
import * as formItemComponentMap from "../FormItem/index";
import { getCheckedLabel } from "../../GenerateForm/FormItemLabel";
import { camelCase, upperFirst } from "lodash-es";
import { generateId } from "@/utils";
import { removeHtmlTag } from "@/views/formgen/utils";

const props = defineProps({
  currentItem: {
    type: Object,
    default: () => {}
  },
  index: {
    type: Number,
    default: 0
  }
});

const formTitleToolbar =
  "  fontsize bold italic underline strikethrough  removeformat alignleft aligncenter alignright  subscript superscript  hr forecolor backcolor image   formvariable formpopup mathformula fulledit math";

// 这些组件值需要被包装 需要特殊处理
const componentList = [
  "RADIO",
  "CHECKBOX",
  "SELECT",
  "MULTIPLE_SELECT",
  "IMAGE_CAROUSEL",
  "IMAGE_UPLOAD",
  "UPLOAD",
  "CASCADER",
  "IMAGE_SELECT",
  "INPUT",
  "TEXTAREA",
  "DATE",
  "RATE",
  "SLIDER",
  "NUMBER",
  "FUNCTION_CALC",
  "PROVINCE_CITY"
];

const labelTinymceId = ref(generateId("tinymce"));

// 允许点击的组件
const clickComponentList = ["TABLE_SELECT", "SUB_FORM", "RADIO", "CHECKBOX"];

const formItemComponent = computed(() => {
  return formItemComponentMap[upperFirst(camelCase(props.currentItem.config.tag))];
});

defineEmits(["change"]);

const config = computed(() => {
  return props.currentItem.config;
});

const formItemId = computed(() => {
  return props.currentItem.vModel;
});

const labelWidth = computed(() => {
  return config.value.labelWidth ? `${config.value.labelWidth}px` : null;
});

const getExamAnswer = computed(() => {
  if (["RADIO", "CHECKBOX", "IMG_SELECT", "SELECT"].includes(props.currentItem.typeId)) {
    const label = getCheckedLabel(props.currentItem.examConfig.answer, props.currentItem.config.options, props.currentItem, {});
    return Array.isArray(label) ? removeHtmlTag(label.join(",")) : "";
  } else if (props.currentItem.typeId === "HORIZONTAL_INPUT") {
    return props.currentItem.examConfig.answer.join(",");
  } else {
    return props.currentItem.examConfig.answer;
  }
});

const handleDefaultValue = val => {};
</script>

<style lang="scss" scoped>
:deep(.not-click-component::after) {
  display: unset;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0);
}

:deep(.not-click-component) {
  pointer-events: none;
  user-select: none;
}

:deep(.form-item-component) {
  width: 100%;
}

:deep(.el-form-item__label) {
  width: 100% !important;
}

.el-form-item__label > div {
  border-radius: 3px;
  display: inline-block;
  width: 95%;
}

// 强制让下拉组件不要显示校验状态
:deep(.form-item-component .el-select__wrapper) {
  box-shadow: 0 0 0 1px var(--el-border-color) !important;
}

.el-form-item__label .title-wrap {
  display: flex;
  align-items: flex-start;
  border: 1px dashed transparent;
  border-radius: 4px;

  .seq-num {
    display: inline-block;
    min-width: 21px;
    font-size: 16px;
    color: var(--el-text-color-primary);
    text-align: left;
    padding-top: 2px;
  }
}

.el-form-item__label .label-wrap {
  width: 100%;
}

// 标题里面的图片宽度会超出
:deep(.mce-content-body img) {
  max-width: 100%;
  height: auto !important;
}

.el-form-item__label .title-wrap:hover {
  border: 1px dashed var(--el-border-color);
  border-radius: 4px;
}

:deep(.el-form-item__label:before) {
  vertical-align: top;
  margin-top: 0.15em;
  display: inline-block;
}

.text-after {
  color: #1890ff;
  margin-left: 10px;
  display: block;
  user-select: none;
}

.form-content {
  width: 100%;
}

.form-item-description {
  color: var(--el-text-color-secondary);
  // 超出宽度换行
  word-wrap: break-word;
  // 超出宽度省略号
  white-space: wrap;
}

.default-text-label {
  min-height: 25px;
}

.hidden-item-icon {
  float: right;
  margin-top: 10px;
}

.answer-text {
  color: #13ce66;
  margin-left: 20px;
  // 超出换行
  word-wrap: break-word;
}
</style>
